Path

Path

Lightning Component

A process component communicates to the user the progress of a particular process.

BaseDesktop Only

Preview

About Path

Accessibility

This component importantly changes role depending on what state it is in. If a Path comes with Stage Coaching information, this pattern lends itself perfectly to being a traditional Tab Set. As you navigate the Path Stages, it’s associated content changes with it.

On the other hand, if a Path doesn’t have Path Stage Coaching information, we can no longer use the Tab Set role, as we would effectively be misleading our users because each Tab has no associated content. This may lead to users trying to find absent content. In this situation, this component is much more suited to being a Listbox component.

The markup structure is identical, just some attributes change their values.

DOM Node Without Coaching With Coaching
.slds-path__nav role="listbox" role="tabset"
.slds-path__link role="option" role="tab"

Notable Attributes - Without Coaching

  • aria-orientation="horizontal" should be applied to the slds-path__nav element to indicate to the screen reader to use horizontal navigation
  • aria-selected="true" should be applied to the selected Stage of the Path as you navigate through the Stages

Notable Attributes - With Coaching

  • When the Path Stage Coaching is not visible, aria-expanded="false" should be set on each slds-path__link Tab
  • When the Path Stage Coaching is visible, aria-expanded should be set to true
  • aria-selected="true" is used to describe the currently active slds-path__link Tab, not the Stage the Path is currently set to

Keyboard navigation

  • For both with and without Path Stage Coaching variants, the following keyboard navigation applies
  • left and right arrow keys move focus and selection, with aria-selected="true"

Responsive path

When the Path needs to be placed in a more narrow column on desktop (between 360px and 564px) the class .slds-region_small should be placed on the container so it can adapt. If the container is between 565px and 1280px, the class .slds-region_medium should be applied.

Overview of CSS Classes

Selector.slds-path
Summary
Restrictdiv
VariantTrue
Selector.slds-is-expanded
Summary

Indicates the coaching section is expanded

Restrict.slds-path
Selector.slds-path__track
Summary

Allows the path itself to be responsive

Restrict.slds-path div
Selector.slds-has-overflow
Summary

Indicates the scroller is in the overflow state

Restrict.slds-path__track
Selector.slds-path__scroller
Summary

Creates the scrolling container for tab overflow

Restrict.slds-path__track div
Selector.slds-path__scroller_inner
Summary

Allows the path to scroll when necessary

Restrict.slds-path__scroller div
Selector.slds-path__nav
Summary

Horizontal list of stages in path component

Restrict.slds-path__scroller_inner ul
Selector.slds-path__item
Summary

Individual stages of a path

Restrict.slds-path__nav li
Selector.slds-is-incomplete
Summary

Creates the incomplete stage of the path

Restrict.slds-path__item
Selector.slds-is-complete
Summary

Creates the completed stage of the path

Restrict.slds-path__item
Selector.slds-is-current
Summary

Creates the current stage of the path

Restrict.slds-path__item
Selector.slds-is-active
Summary

Creates the active stage of the sales path

Restrict.slds-path__item
Selector.slds-is-lost
Summary

Creates lost stage of the path

Restrict.slds-path__item
Selector.slds-is-won
Summary

Creates success stage of the path

Restrict.slds-path__item
Selector.slds-path__link
Summary

Creates actionable element inside of each path item

Restrict.slds-path__item a
Selector.slds-path__title
Summary

Contains the name of the stage

Restrict.slds-path__link span
Selector.slds-path__stage
Summary

Contains the check mark when the stage is completed

Restrict.slds-path__link span
Selector.slds-path__scroll-controls
Summary

Container for the buttons that control the scrolling

Restrict.slds-path__track div
Selector.slds-path__stage-name
Summary

Shows the stage name when in the smaller state

Restrict.slds-path__track span
Selector.slds-path__scroller-container
Summary

Creates the container for toggle button and path

Restrict.slds-path div
Selector.slds-path__action
Summary

Container for path actions

Restrict.slds-path div
Selector.slds-path__trigger
Summary

Button that toggles visibility of stage's tabpanel

Restrict.slds-path button
Selector.slds-path__mark-complete
Summary

Actionable button that invokes a completion of the path

Restrict.slds-path button
Selector.slds-path__mark-current
Summary

Actionable button that invokes a current stage of the path

Restrict.slds-path button, .slds-path-coach button
Selector.slds-path__content
Summary

Tabpanel of each stage of the path

Restrict.slds-path div
Selector.slds-path__keys
Summary

Key field section of expanded tabpanel

Restrict.slds-path__content div
Selector.slds-path__coach-title
Summary

This creates the underlined titles in the coaching area

Restrict.slds-path__keys div, .slds-path__guidance h2
Selector.slds-path__coach-edit
Summary

The Edit link in Path Coaching

Restrict.slds-path__coach-title button
Selector.slds-path__guidance
Summary

Guidance section of expanded tabpanel

Restrict.slds-path__content div
Selector.slds-path__coach-title
Summary

This creates the underlined titles in the coaching area

Restrict.slds-path__keys div, .slds-path__guidance h2
Selector.slds-path__coach-edit
Summary

The Edit link in Path Coaching

Restrict.slds-path__coach-title button
Selector.slds-path__guidance-content
Summary

This creates the space at the top of the guidance area

Restrict.slds-path__guidance div